<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Water Calc</title>
</head>
<body>
<div>
    <p>asdasdasdada</p>
    <button type="button" onclick="getChartImg()">下载</button>
</div>
<div id="chart" style="width:600px;height:500px"></div>
<script type="text/javascript" src="js/echarts.common.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var chartSrc = "";
    $(function () {
        var myChart = echarts.init(document.getElementById('chart'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        chartSrc = myChart.getDataURL({
            type: 'png',
            pixelRatio: 2,
            backgroundColor: '#fff'
        });
    })


    function getChartImg() {
        var form = $("<form>");
        form.attr("style", "display:none").attr("target", "").attr("method", "post").attr("action", "/report/pdf");
        var input = $("<input>");
        input.attr("type", "hidden").attr("name", "data").attr("value", "aaaaaa");
        var imgInput = $("<input>");
        imgInput.attr("type", "hidden").attr("name", "imgdata").attr("value", chartSrc);
        form.append(input);
        form.append(imgInput);
        $("body").append(form);
        form.submit().remove();
    }
</script>
</body>
</html>